<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-26 14:50:44
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-26 14:51:57
-->
<template>
    <div>
        <div class="header">
        <div class="header-left">
            <div class="header-left-time">统计时间</div>
            <span>2023年1月 ~ 2023年12日</span>
        </div>
        <div class="header-right">
            <el-row class="mb-4">
                <el-button>实时</el-button>
                <el-button type="primary" @click="dayBtn(0)">日</el-button>
                <el-button type="success" @click="weekBtn(1)">周</el-button>
                <el-button type="info" @click="monthBtn(2)">月</el-button>
                <el-button type="warning">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </el-row>
        </div>

    </div>
    </div>
    <echarts :data="data"></echarts>
    <table1 :data="data"></table1>
    <table2 :datayyy="data1" :ssss="data2"></table2>
</template>

<script setup lang="ts">
import echarts from './ui/echart.vue'
import table1 from './ui/table1.vue'
import table2 from './ui/table2.vue'
import { ref ,reactive} from 'vue';
import {tableDataList,deepClone} from './hooks'
const [data1,data2, total, loadData] = tableDataList()
console.log(data1.value);

const data = ref([{A:"市场一部",B:133,C:9},
{A:"市场二部",B:158,C:10},
{A:"市场三部",B:268,C:19},
{A:"市场四部",B:338,C:22},
{A:"市场五部",B:618,C:41}])


const dayBtn = (value:number) => {
  // 模拟数据更新
  data.value =[{A:"市场一部",B:133,C:9},
{A:"市场二部",B:158,C:10},
{A:"市场三部",B:268,C:19},
{A:"市场四部",B:338,C:22},
{A:"市场五部",B:618,C:41}];
};

const weekBtn = (value:number) => {
  // 模拟改变数据
  data.value =[{A:"市场一部",B:1133,C:9},
{A:"市场二部",B:1158,C:10},
{A:"市场三部",B:2168,C:18},
{A:"市场四部",B:3138,C:30},
{A:"市场五部",B:6118,C:60}]
};

const monthBtn = (value:number) => {
  // 模拟改变数据
  data.value =[{A:"市场一部",B:7133,C:20},
{A:"市场二部",B:7158,C:25},
{A:"市场三部",B:7268,C:26},
{A:"市场四部",B:7338,C:26},
{A:"市场五部",B:7618,C:30}];
};
</script>

<style lang="scss" scoped>
    .header {
    height: 50px;
    width: 100%;

    .header-left {
        float: left;

        .header-left-time {
            float: left;
            font-weight: 600;
            padding-right: 10px;
        }
    }

    .header-right {
        float: right;
    }
}
</style>